<template>
	<view class="">
		<view class="my-list gui-bg-white">
			<view class="gui-list-items gui-border-b" style="padding-bottom: 20rpx;">
				<view class="gui-list-body">
					<view class="gui-list-title">
						<text class="gui-list-title-text gui-list-one-line gui-primary-color">头像</text>
					</view>
				</view>
				<image @click="goDetail" style="width: 120rpx;height: 120rpx;border-radius: 60rpx;"
					:src="avatar&&avatar" mode="aspectFill"></image>
			</view>
			<view class="gui-list-items gui-border-b">
				<view class="gui-list-body">
					<view class="gui-list-title">
						<text class="gui-list-title-text gui-list-one-line gui-primary-color">昵称</text>
					</view>
				</view>
				<!-- <text class="gui-list-arrow-right gui-icons gui-color-gray-light">Hello</text> -->
				<input type="text" class="gui-font-28 input-box" v-model="nickname" placeholder="昵称" />
			</view>
		</view>
		<view class="gui-margin gui-margin-top-large">
			<view @click="saveNickname" class="gui-button gui-bg-primary button-border-radius" hover-class="gui-tap">
				<text class="gui-icons gui-color-white gui-button-text">保存</text>
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				nickname: "",
				avatar: null,
			}
		},
		onShow() {
			let u = uni.getStorageSync('userInfo');
			if (u) {
				let user = JSON.parse(u);
				this.nickname = user.nickname
				this.avatar = user.avatar
			}
		},
		methods: {
			saveNickname() {
				// console.log(this.nickname)
				uni.showLoading({
					title: "",
					mask: true
				});

				uni.$http.postLogin('user/profile', {
					data: {
						nickname: this.nickname
					}
				}, (res) => {
					uni.hideLoading()
					if (res.code == 1) {
						uni.showToast({
							title: '修改成功',
							icon: "none"
						});
						this.freshUser()
					} else {
						uni.showModal({
							content: res.msg,
							showCancel: false
						})
					}
				}, () => {
					uni.hideLoading()
				})
			},
			freshUser() {
				uni.$http.postLogin('user/info', {}, (res) => {
					if (res.code == 1) {
						this.nickname = res.data.nickname
						uni.setStorageSync('userInfo', JSON.stringify(res.data));
					}
				})
			},
			goDetail() {
				uni.navigateTo({
					url: '/pages/user/user_cropper'
				})
			}
		}
	}
</script>
<style>
	.my-list {
		padding: 0 20rpx;
	}

	.input-box {
		width: 200rpx;
		text-align: right;
	}
</style>